import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { AtImagePicker } from 'taro-ui';
import { View, Input, Form, Button, Text } from "@tarojs/components-rn";
import { inject, observer } from "@tarojs/mobx-rn";
import PageFooterInfo from "../../components/PageFooterInfo";
import PickerArea from "../../components/PickerArea";
import { getRuntime } from "../../utils/common";
import page2StyleSheet from "./page2_styles";
// 企业3A信用评级
var _styleSheet = page2StyleSheet;
let Page2 = class Page2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allProvince: [],
      allProvinceAreaName: [],
      area: '',
      allBusinessLicenseIMG: [],
      businessLicenseIMG: [],
      allQualificationCertificateIMG: [],
      qualificationCertificateIMG: [],
      allLicenceIMG: [],
      licenceIMG: []
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '企业3A信用评级' });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  // 地区选择
  pickerArea(res) {
    this.setState({
      area: res.province.label + res.city.label
    });
  }
  changeImg1(e) {
    this.setState({
      allBusinessLicenseIMG: e
    }, () => {
      getRuntime().uploadFile(e, res => {
        //console.log(res.join('+'))
        //console.log(JSON.stringify(res))
        this.setState({
          businessLicenseIMG: res.join(',')
        });
      });
    });
  }
  changeImg2(e) {
    this.setState({
      allQualificationCertificateIMG: e
    }, () => {
      getRuntime().uploadFile(e, res => {
        //console.log(res.join('+'))
        //console.log(JSON.stringify(res))
        this.setState({
          qualificationCertificateIMG: res.join(',')
        });
      });
    });
  }
  changeImg3(e) {
    this.setState({
      allLicenceIMG: e
    }, () => {
      getRuntime().uploadFile(e, res => {
        //console.log(res.join('+'))
        //console.log(JSON.stringify(res))
        this.setState({
          licenceIMG: res.join(',')
        });
      });
    });
  }
  submit(e) {
    let { businessLicenseIMG, qualificationCertificateIMG, licenceIMG, area } = this.state;
    let { companyName, contactsName, contactsPhone, contactsEmail, contactsAddress } = e.detail.value;
    if (getRuntime().isEmpty(companyName)) {
      getRuntime().showToast('请填写公司名称~');
      return false;
    }
    if (getRuntime().isEmpty(area)) {
      getRuntime().showToast('请选择国家地区~');
      return false;
    }
    if (getRuntime().isEmpty(contactsName)) {
      getRuntime().showToast('请填写联系人姓名~');
      return false;
    }
    if (getRuntime().isEmpty(contactsPhone)) {
      getRuntime().showToast('请填写联系人电话~');
      return false;
    }
    if (getRuntime().isEmpty(businessLicenseIMG)) {
      getRuntime().showToast('请上传营业执照~');
      return false;
    }
    if (getRuntime().isEmpty(qualificationCertificateIMG)) {
      getRuntime().showToast('请上传资质证书~');
      return false;
    }
    if (getRuntime().isEmpty(licenceIMG)) {
      getRuntime().showToast('请上上传用户开户许可~');
      return false;
    }
    let businessStandingsStore = this.props.stores.BusinessStandingsStore;
    businessStandingsStore.saveStandingInfo({
      form: {
        companyName,
        area,
        businessLicenseIMG,
        qualificationCertificateIMG,
        licenceIMG,
        contactsName,
        contactsPhone,
        contactsEmail,
        contactsAddress
      },
      callback: () => {
        getRuntime().showModal('预约成功', '我们会尽快和您取得联系，请保持电话畅通~', () => {
          getRuntime().navigateBack();
        });
      }
    });
  }
  render() {
    let { allBusinessLicenseIMG, allQualificationCertificateIMG, allLicenceIMG } = this.state;
    return <View style={_styleSheet["from-wrap"]}>
        <Form onSubmit={this.submit.bind(this)}>
          <View style={[_styleSheet["item-group"], _styleSheet["pt0"], _styleSheet["pb0"]]}>
            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>公司名称</View>
              <Input placeholderClass="placeholder_class" placeholder="请填写公司名称" name="companyName" style={_styleSheet["from-input"]} />
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>国家/地区</View>
              <PickerArea onPicketArea={this.pickerArea.bind(this)} level={2} />
            </View>
          </View>
          <View style={_styleSheet["item-group"]}>
            <View style={[_styleSheet["input-group"], _styleSheet["input-upload"]]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>上传营业执照</View>
              <AtImagePicker mode="widthFix" length={4} count={2} showAddBtn={true} files={allBusinessLicenseIMG} onChange={this.changeImg1.bind(this)} />
            </View>
            <View style={[_styleSheet["input-group"], _styleSheet["input-upload"]]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>上传资质证书 <Text style={[_styleSheet["list-small"], _styleSheet["list-info"]]}>生产许可证，ccc证书等</Text> </View>
              <AtImagePicker mode="widthFix" length={4} count={2} files={allQualificationCertificateIMG} name="qualificationCertificateIMG" onChange={this.changeImg2.bind(this)} />
            </View>
            <View style={[_styleSheet["input-group"], _styleSheet["input-upload"]]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>上传用户开户许可</View>
              <AtImagePicker mode="widthFix" length={4} count={2} files={allLicenceIMG} name="licenceIMG" onChange={this.changeImg3.bind(this)} />
            </View>
          </View>
          <View style={_styleSheet["item-group"]}>
            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>联系人</View>
              <Input placeholderClass="placeholder_class" placeholder="请填写联系人" name="contactsName" style={_styleSheet["from-input"]} />
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>联系电话</View>
              <Input type={"number"} maxLength={11} placeholderClass="placeholder_class" placeholder="请填写联系电话" name="contactsPhone" style={_styleSheet["from-input"]} />
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>联系邮箱</View>
              <Input placeholderClass="placeholder_class" placeholder="请填写联系邮箱" name="contactsEmail" style={_styleSheet["from-input"]} />
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>联系地址</View>
              <Input placeholderClass="placeholder_class" placeholder="请填写联系地址" name="contactsAddress" style={_styleSheet["from-input"]} />
            </View>
          </View>
          <Button formType="submit" style={_styleSheet["page-submit"]}>立即预约办理</Button>
        </Form>
        <PageFooterInfo />
      </View>;
  }
};
Page2 = tslib_1.__decorate([inject("stores"), observer], Page2);
export default Page2;